<!--
* @FileDescription: 抽采利用-抽采评价查看
* @Author: yuec621@outlook.com
* @Date: 2025-08-07 16:32:04
* @LastEditors: Please set LastEditors
* @LastEditTime: 2025-08-07 16:32:04
-->
<template>
  <div class="pagestyle">
    <list_controller ref="zujianname" :options="state.options" :noprintDownShow="true">
      <template v-slot:selectNamelist> 抽采利用评价 </template>
    </list_controller>
    <!-- 新增弹窗 -->
    <teleport to="body">
      <vxe-modal esc-closable destroy-on-close :lock-view="false" :width="664" v-model="state.addModal"
        resize :mask="true" :before-hide-method="close" showFooter>
        <template #title>
          <div class="w100 h100 fsc mask_title">{{state.modalTitle}}</div>
        </template>
        <template #default>
          <div class="form_box">
            <el-form ref="formRef" :model="state.formData" :rules="state.rules" label-position="top">
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="工作面名称" prop="workspaceName">
                    <el-input style="width:200px;" clearable v-model="state.formData.workspaceName" placeholder="请输入"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="瓦斯存储量(万立方米)" prop="gasStorage">
                    <el-input style="width:200px;" clearable v-model="state.formData.gasStorage" placeholder="请输入"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="瓦斯达标量(万立方米)" prop="gasTargetVolume">
                    <el-input style="width:200px;" clearable v-model="state.formData.gasTargetVolume" placeholder="请输入"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </template>
        <template #footer>
          <el-button @click="close">取消</el-button>
              <el-button type="primary" @click="sumbitClick">
                确定
              </el-button>
        </template>
      </vxe-modal>
    </teleport>
    <!-- 详情弹窗 -->
    <teleport to="body">
      <vxe-modal esc-closable destroy-on-close :lock-view="false" :width="664" v-model="state.open_detail"
        resize :mask="true" :before-hide-method="close" showFooter>
        <template #title>
          <div class="w100 h100 fsc mask_title">详情</div>
        </template>
        <template #default>
          <div class="form_box">
            <detailCom :descList="state.descList1"></detailCom>
          </div>
        </template>
        <template #footer>
          <div class="form_footer form_footer2">
              <el-button type="danger" plain @click="deleteBtn(1,state.formData)">删除</el-button>
              <el-button type="primary" @click="editBtn(state.formData)">
                编辑
              </el-button>
            </div>
        </template>
      </vxe-modal>
    </teleport>
  </div>
</template>
<script setup>
import list_controller from "@/components/commonCom/list_controller";
import { computed, onMounted, reactive } from "vue";
import { table_headers } from "@/components/commonCom/table_headers";
import axios from "@/utils/request";
import usePagesStore from "@/store/modules/pages";
import { ElMessage,ElMessageBox } from "element-plus";
import detailCom from '@/components/commonCom/detailCom';


const { proxy } = getCurrentInstance();
const store = usePagesStore();
const router = useRouter();
const upload = ref(null);

// 输入框数字和小数校验
const validateNumber = (rule, value, callback) => {
  const regex = /^[0-9]*\.?[0-9]*$/;
  if (value && !regex.test(value)) {
    callback(new Error('请输入有效的数字或小数'));
  } else {
    callback();
  }
}

let state = reactive({
  options: {
    tableheads: computed(() => table_headers.realPumpExtrationExploit),
    queryList: {
      dropdownUrl: "",
      querys: [],
      queryMap: new Map([]),
    },
    dataUrl: "/realPumpExtrationExploit/list",
  },
  modalTitle:'新增',
  addModal:false,
  open_detail:false,
  formData:{},
  rules:{
    workspaceName: [{
      required: true,
      message: '请输入工作面名称',
      trigger: 'blur'
    }],
    gasStorage: [{
      required: true,
      message: '请输入瓦斯存储量',
      trigger: 'blur'
    },{ validator: validateNumber, trigger: 'blur' }],
    gasTargetVolume: [{
      required: true,
      message: '请输入瓦斯达标量',
      trigger: 'blur'
    },{ validator: validateNumber, trigger: 'blur' }],
  },
  descList1:[],
});

// 打开新增弹窗
const addBtn = () => {
  state.addModal = true
  state.modalTitle = '新增'
}
// 关闭弹窗时执行
const close = () =>{
  state.addModal = false
  state.formData = {}
}
// 提交
const sumbitClick = () =>{
  proxy.$refs["formRef"].validate(valid => {
    if (valid){
      if(state.modalTitle.includes('新增')){
        axios.post('/workspace/add',state.formData).then(res => {
          if(res.code == 200){
            ElMessage.success(res.msg)
            close()
            proxy.$refs['zujianname'].getData()
          }
        })
      }else{
        axios.post('/workspace/modify',state.formData).then(res => {
          if(res.code == 200){
            ElMessage.success(res.msg)
            close()
            proxy.$refs['zujianname'].getData()
          }
        })
      } 
    }
  })
}
// 打开删除弹窗
const deleteBtn = (n,obj) =>{
  if(n == 0){
    let ids = []
    if (store.records.length > 0) {
      ids = store.records.map(item => {
        return item.id
      })
    } else {
      ElMessage.warning('请先勾选所要删除数据!');
    }
    if(ids.length > 0){
      ElMessageBox.confirm(
        '是否确认删除?',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then(()=>{
        axios.post('/workspace/del',ids).then(res => {
          if (res.code == 200) {
            proxy.$refs['zujianname'].getData()
            proxy.$modal.msgSuccess(res.msg);
            store.records = []
          }
        })
      })
    }
  }else{
    ElMessageBox.confirm(
        '是否确认删除?',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then(()=>{
        axios.post('/workspace/del',[obj.id]).then(res => {
          if (res.code == 200) {
            proxy.$refs['zujianname'].getData()
            proxy.$modal.msgSuccess(res.msg);
            store.records = []
            state.open_detail = false
          }
        })
      })
  }
} 
// 打开编辑弹窗
const editBtn = (row) => {
  state.formData = row
  state.addModal = true
  state.modalTitle = '修改'
}
// 打开详情弹窗
const lookBtn = (row) => {
  state.formData = row
  state.open_detail = true
  state.descList1[0] = {
    name: "工作面名称",
    value: state.formData.workspaceName,
    col: 8,
  }
  state.descList1[1] = {
    name: "瓦斯存储量(万立方米)",
    value: state.formData.gasStorage,
    col: 8,
  }
  state.descList1[2] = {
    name: "瓦斯达标量(万立方米)",
    value: state.formData.gasTargetVolume,
    col: 8,
  }
}

onMounted(()=>{

})
</script>
<style lang="scss" scoped>
.form_box{
  .title{
    height: 14px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    font-weight: 700;
    color: #3e464f;
    .colorarea{
      margin-right: 6px;
      width: 4px;
      height: 14px;
      background-color: #409eff;
    }
  }
  .label{
    height: 22px;
    display: flex;
    justify-content: space-between;
  }
  .item_box{
    height: 32px;
    display: flex;
    span{
      margin-left: 16px;
    }
  }
  .line_box{
    height: 16px;
  }
  .form_footer2{
    padding: 16px 0;
    display: flex;
    justify-content: space-between;
  }
}
</style>
